<template>
  <button :class="[
    'sq-button',
    `sq-button--${type}`,
    plain ? 'is-plain' : '',
    round ? 'is-round' : '',
    circle ? 'is-circle' : '',
    disabled ? 'is-disabled' : '',
    dash ? 'is-dash' : '',
    `sq-button--${size}`,
  ]" :disabled="disabled" @click="handleClick" @mouseenter="mouseEnter" @mouseleave="mouseLeave">

    <i v-if="icon" :class="icon"></i>
    <!-- tip:根据是否传入内容进行span渲染 -->
    <span v-if="$slots.default">
      <slot></slot>
    </span>
    <span class="tooltip" v-show="isShow && tooltip">
      <i class="triangle"></i>
      {{ tooltip }}
    </span>
  </button>
</template>

<script>

export default {
  name: "SqButton",
  data() {
    return {
      isShow: false
    };
  },
  methods: {
    handleClick(e) {
      this.$emit("click", e);
    },
    mouseEnter() {
      this.isShow = true;
      console.log(this.isShow)
    },
    mouseLeave() {
      this.isShow = false
    }
  },
  components: {},
  props: {
    // 按钮类型
    type: {
      type: String,
      default: "default",
      // type值校验,type的值必须为下面几个值之一
      validator: function (value) {
        return (
          [
            "default",
            "success",
            "primary",
            "danger",
            "warning",
            "info",
          ].indexOf(value) !== -1
        );
      },
    },
    // 朴素按钮（按钮内部显示时不填充颜色，hover时填充颜色）
    plain: {
      type: Boolean,
    },
    // round（圆角）按钮
    round: {
      type: Boolean,
    },
    // 圆形按钮
    circle: {
      type: Boolean,
    },
    // icon
    icon: {
      // tip：这里icon为数组类型，给它添加一个布尔作为默认值
      type: [Array, Boolean, String],
      default: false,
    },
    // disabled禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // 按钮大小，默认为normal，
    size: {
      type: String,
      default: "normal",
      validator: (value) => {
        return ["normal", "large", "small", "mini"].indexOf(value) > -1;
      },
    },
    // 是否展示提示
    tooltip: {
      type: String,
      default: '',
    },
    dash: {
      type: Boolean,
    }
  },
  created() { console.log(this.tooltip) },
  mounted() { },
  computed: {},
  watched: {},
};
</script>
<style lang="less">
@import "./index.less";
</style>
